<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="box">
        姓名：<input type="text" v-model.trim="name">
        成绩：<input type="number" v-model.trim="num">
        <button @click="add()">添加</button><br>
        <input type="text" v-model="text"><button @click="sou()">搜索</button>
        <h1>总分{{fn}}</h1>
        <h1>平均分{{fn1}}</h1>
        <button @click="sort1">成绩从低到高</button>
        <button @click="sort2">成绩从高到低</button>
        <button @click="jige">及格</button>
        <button @click="bujige">不及格</button>
        <button @click="quanbu">显示全部</button>
        <table border="1px" style="width: 100%;">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr" :key="index" v-if="">
                    <th>{{item.name}}</th>
                    <th>{{item.chengji}}</th>
                    <th><button @click="del(index)">删除</button><button @click="xiu(item.id)">修改</button></th>
                </tr>
            </tbody>
        </table>
        <div v-show="is">
            姓名：<input type="text" v-model="name2">
            成绩：<input type="number" v-model="num2">
            <button @click="yes()">确认修改</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                text: "",
                id: null,
                num2: "",
                name2: "",
                is: false,
                name: "",
                num: "",
                arr: [{
                    id: 1,
                    name: "张三",
                    chengji: 30
                }, {
                    id: 2,
                    name: "李四",
                    chengji: 50
                }, {
                    id: 3,
                    name: "王五",
                    chengji: 90
                }],
                arr2: [{
                    id: 1,
                    name: "张三",
                    chengji: 30
                }, {
                    id: 2,
                    name: "李四",
                    chengji: 50
                }, {
                    id: 3,
                    name: "王五",
                    chengji: 90
                }]
            },
            methods: {
                // 添加
                add() {
                    if (this.name != "" && this.num != "") {
                        this.arr.push({
                            id: this.arr.length + 1,
                            name: this.name,
                            chengji: Number(this.num)
                        })
                    } else {
                        alert("输入不能为空")
                    }
                    this.name = ""
                    this.num = ""
                },
                // 删除
                del(index) {
                    this.arr.splice(index, 1)
                },
                // 修改
                xiu(id) {
                    this.is = true
                    this.id = id
                },
                yes() {
                    var a = this.arr.find(item => item.id == this.id)
                    if (this.name2 != "" && this.num2 != "") {
                        a.name = this.name2
                        a.chengji = this.num2
                    } else {
                        alert("输入不能为空")
                    }
                    this.is = false
                },
                // 搜索
                sou() {
                    this.arr = this.arr.filter(item => item.name.includes(this.text))
                },
                // 排序正序
                sort1() {
                    this.arr = this.arr.sort((a, b) => a.chengji - b.chengji)
                },
                // 倒序
                sort2() {
                    this.arr = this.arr.sort((a, b) => b.chengji - a.chengji)
                },
                // 及格
                jige() {
                    this.arr = this.arr.filter(item => item.chengji >= 60)
                },
                // 不及格
                bujige() {
                    this.arr = this.arr.filter(item => item.chengji < 60)
                },
                // 显示全部
                quanbu() {
                    this.arr = JSON.parse(JSON.stringify(this.arr2));
                }
            },
            computed: {
                // 总分
                fn() {
                    return this.arr.reduce((index, item) => index + item.chengji, 0);
                },
                // 平均分
                fn1() {
                    var a = this.arr.reduce((index, item) => index + item.chengji, 0)
                    var b = this.arr.length
                    return a / b
                }
            }
        })
    </script>
</body>

</html>